<style>
.selectAll{
	width: 60%;
	height: 100%; 
	border: 1px solid #F0F0F0; 
	margin: 3% 20%;
}
.select-list {
	padding: 10px 50px;
	height: 80px;
}
.select-list h3{
	padding-bottom:10px;
	border-bottom:1px solid;
}
.select-list span {
	font-size: 14px;
	margin: 0px 0px 0px 2%;
}

.select-list select {
	width: 50%;
	height: 30px;
}

.select-list button {
	float:left;
	margin: 0 2% 0 20%
}

  .processb{
  	margin: -7% 2% 2% 43%;
    width: 50%;
    height: 25px;
    border: solid 1px #ccc;
   
  }
  .processbackground{
     background-color: #90EE90;
     width: 0px;
     height: 23px;
        
  }
</style>
<div class="row">
	<div class="col-xs-12">
		<div class="box">
			<!-- /.box-header -->
			<div class="box-body">
				<div class="selectAll">
					<div class="select-list">
						<h3>正在导入镜像包，请耐心等待........</h3>
					</div>
					<div class="addselectlist">
					
					</div>
					<div class="select-list">
						<button class="btn btn-primary" data-toggle="modal"  id="detail">详情</button>
						<button class="btn btn-primary" id="dockerfinish" >完成</button>
					</div>
				</div>
			</div>
			<!-- /.box-body -->
		</div>
		<!-- /.box -->
	</div>
	<!-- /.col -->
</div>
<!-- /.row -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
	aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title" id="myModalLabel">详细信息</h4>
			</div>
			<div class="modal-body">
				<!-- Horizontal Form -->
		          <div class="box box-info" style="margin-bottom:0px;">
		            <!-- form start -->
		            <form class="form-horizontal">
		              <table id="dialogResult" class="table table-bordered table-hover">
						<thead>
						<tr>
							<th></th>
							<th>镜像名称</th>
							<th>私库地址</th>
<!-- 							<th>大小</th> -->
							<th>版本</th>
							<th>详情</th>
						</tr>
						</thead>
						</table>
		              <!-- /.box-body -->
		            </form>
		          </div>
		          <!-- /.box -->
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关<span style="padding-left: 12px" />闭</button>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">

//document.getElementById("processbar").style.width = (10*1)+ "%";
setTimeout(dockerInstall, 100);
$("#detail").attr({"disabled":"disabled"});
$("#dockerfinish").attr({"disabled":"disabled"});
function dockerInstall(){
	$.ajax({
	    url:"/dockerimg/importstatus",
	    type: "GET",
	    timeout:60*60*1000,
	    dataType:"json",
	    success: function(data){
	    	var divString="";
	    	if(data.status==0){
	    		$.each(data.data.dockerImages,function(i,item){
		    		divString += [
		  						'<div class="select-list">',
		  						'<span>镜像:<img src="/external/'+item.image.imageIconUrl+'" style="height:25px;width:50px;" alt="">:</span>',
		  						item.processResult=="1"?'<image style="width:20px;height:20px;margin:8px 10px;" src="../img/success.png"/>':'<image style="width:20px;height:20px;margin:8px 10px;" src="../img/failed.png"/>',
		  						'<div class="processb" id="process1">',
		  						'<div id="processbar" style="width:'+item.progress+'%;" class="processbackground"><span style="margin-left:45%;">'+item.progress+'%</span></div>',
		  						'</div>',
		  						'</div>',
		  		            ].join('');
		    	});
		    	$(".addselectlist").html(divString);
		    	if(data.data.finish==true){
		    		//全部进度条100%
		    		if(data.data.success==true){
			    		dockerInstallResult("导入成功",data.data);
			    	}else{
			    		dockerInstallResult("导入失败",data.data);
			    	}
		    		$("#detail").attr({"disabled":false});
		    		$("#dockerfinish").attr({"disabled":false});
		    		$("#detail").click(function(){
		    			$("#myModal").modal('show');
		    		});
		    	}else{
		    		setTimeout(dockerInstall, 1000);
		    	}
	    	}else if(data.status==1){
	    		alert(data.message);
	    		$("#detail").attr({"disabled":false});
	    		$("#dockerfinish").attr({"disabled":false});
	    	}
	    }
	});	
}

$("#dockerfinish").click(function(){
	$(".content").load("application_docker.html");
});
function dockerInstallResult(finished,importdata){
	$("#myModalLabel").html(finished);
	var detailInformation="";
	$.each(importdata.dockerImages,function(i,item){
		
		detailInformation += [
								'<tr>',
								item.processResult=="1"?'<td><img src="./img/success.png" alt=""></td>':'<td><img src="./img/failed.png" alt=""></td>',
								'<td>'+item.saveImageName+'</td>',
								'<td>'+item.image.imageUrl+'</td>',
// 								'<td>'+Math.round((item.image.size)/1024)+'M</td>',
								'<td>'+item.image.version+'</td>',
								item.processHint==null?'<td></td>':'<td>'+item.processHint+'</td>',
								'</tr>'
				            ].join('');
		
	});
	$("#dialogResult").append(detailInformation);
}
</script>
